<template>
	<view class="colone">
	<view class="topun" style="background-image: url('https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-1265.png');">
		<view class="biaoti">我的</view>
		<view class="toxiang">
			<image :src="avatarUrl" class="avatar" @click="selectAvatar"></image>
			<text class="nickname" @click="editNickname">{{nickname}}</text>
		</view>
		<view class="tishi" style="background-image: url('https://xnlv.lizxx.com/image/xnlv/static/wde/wdeRectangle-34625120.png');  background-size: cover;">
			<view class="tishi-biaoti">云游足迹</view>
			<view class="tishi-fubiaoti">您已云游了{{sum}}个古村镇</view>
		</view>
	</view>
	<view class="dibu">
	<view class="list-group">
		<view class="list-item" @click="my1">
		  <view class="list-item-1">
			  <image :src="imageUrl + '/wde/wdeGroup-892.png'" class="list-item-image"></image>
			  <text class="list-item-text">我的点赞</text>
			  <image :src="imageUrl + '/wde/wdeGroup-281.png'" class="list-item-image-2"></image>
		  </view>
		</view>
		<view class="list-item" @click="my2">
		  <view class="list-item-1">
			<image :src="imageUrl + '/wde/wdeFrame.png'" class="list-item-image"></image>
			<text class="list-item-text">我的文创</text>
			<image :src="imageUrl + '/wde/wdeGroup-281.png'" class="list-item-image-2"></image>
		  </view>
		</view>
		<view class="list-item" @click="my3">
		  <view class="list-item-1">
			<image :src="imageUrl + '/wde/wdeFrame-1.png'" class="list-item-image"></image>
			<text class="list-item-text">关于我们</text>
			<image :src="imageUrl + '/wde/wdeGroup-281.png'" class="list-item-image-2"></image>
		  </view>
		</view>
	</view>
	<view class="banben">当前版本：v2.0</view>
	<view class="daohanglan">
		<image :src="imageUrl + '/wde/wdeGroup-857.png'" class="daohanglan-imager" @click="goToPage1"></image>
		<image :src="imageUrl + '/wde/wdeGroup-885.png'" class="daohanglan-imager" @click="goToPage2"></image>
		<image :src="imageUrl + '/wde/wdeGroup-886.png'" class="daohanglan-imager"></image>
	</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			imageUrl: this.$imageUrl,
			avatarUrl: 'https://xnlv.lizxx.com/image/xnlv/static/wde/wdeGroup-889.png',
			nickname: '旅行者',
			sum: '8',
			}
		},
		methods: {
		selectAvatar() {
		      uni.chooseImage({
		        count: 1, // 选择一张图片
		        sizeType: ['original', 'compressed'], // 可以指定原图或压缩图
		        sourceType: ['album'], // 从相册选择
		        success: (res) => {
		          this.avatarUrl = res.tempFilePaths[0];
		        },
		      });
		    },
			editNickname() {
			      uni.showModal({
			        title: '修改昵称',
			        content: '请输入新昵称',
					editable: true,// 设置输入类型为文本
			        success: (res) => {
			          if (res.confirm) {
			            this.nickname = res.content;
			        }
			    },
			});
		},
		    goToPage1() {
		          wx.redirectTo({
		            url: '/pagesNew/pages-guide/guide', // 跳转到导览页面
		          });
		        },
		    goToPage2() {
		          wx.redirectTo({
		            url: '/pagesNew/pages/index/index', // 跳转到云展馆页面
		          });
		        },
			my1() {
				wx.redirectTo({
				  url: '/pagesNew/pages-my/pages-my-wddz/pages-my-wddz', 
				});
			},
			my2() {
				wx.redirectTo({
				  url: '/pagesNew/pages-my/pages-my-wdsc/pages-my-wdsc', 
				});
			},
			my3() {
				wx.redirectTo({
				  url: '/pagesNew/pages-my/pages-my-gywm/pages-my-gywm', 
				});
			}
	},
};
</script>

<style>
.colone{
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.topun{
	position: absolute;
	position: relative;
	width: 100%;
	height: 45vh;
	display: flex;
	flex-direction: column;
}
.dibu{
	position: absolute;
	display: flex;
	flex-direction: column;
	z-index: 2;
	width: 100%;
	height: 57vh;
	top: 43vh;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	background-color: #E4EBE9;
}
.biaoti{
	width: 64rpx;
	height: 48rpx;
	margin-top: 15%;
	margin-left: 45%;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.toxiang {
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	margin-top: 10%;
}
.avatar {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%; // 使头像显示为圆形
}
.nickname {
   margin-top: 2%;
   width: 300rpx;
   height: 60rpx;
   font-family: Source Han Sans CN, Source Han Sans CN;
   font-weight: 500;
   font-size: 40rpx;
   color: #FFFFFF;
   line-height: 47rpx;
   text-align: center;
   font-style: normal;
   text-transform: none;
}
.tishi{
	display: flex;
	width: 93vw;
	height: 118.78rpx;
	margin-top: 10%;
	margin-left: 2.5%;
}
.tishi-biaoti{
	width: 128rpx;
	height: 48rpx;
	margin-top: 2.5vh;
	margin-left: 44rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.tishi-fubiaoti{
	width: 284rpx;
	height: 48rpx;
	margin-top: 2.7vh;
	margin-left: 20%;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 28rpx;
	color: #FFFFFF;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.list-group {
    width: 100%;
}
.list-item {
    display: flex;
    flex-direction: column;
	width: 85vw;
	height: 132rpx;
    margin-top: 4%;
	margin-left: 7%;
	border-bottom: 2px solid rgba(64,112,114,0.2);
}
.list-item-1{
	display: flex;
	width: 100%;
	height: 100%;
}
.list-item-image{
	width: 50rpx;
	height: 50rpx;
	margin-top: 5%;
	margin-left: 4%;
}
.list-item-text{
	width: 120rpx;
	height: 46rpx;
	margin-top: 6%;
	margin-left: 6%;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 30rpx;
	color: #697E71;
	line-height: 35rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.list-item-image-2{
	width: 31.54rpx;
	height: 31.54rpx;
	margin-top: 6.3%;
	margin-left: 59%;
}
.banben{
	width: 168rpx;
	height: 36rpx;
	margin-top: 7%;
	margin-left: 36%;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 24rpx;
	color: #808D84;
	line-height: 28rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.daohanglan{
	display: flex;
	width: 100%;
	height: auto;
	margin-top: 20%;
	margin-left: 9%;
}
.daohanglan-imager{
	width: 160rpx;
	height: 160rpx;
	margin-left: 32rpx;
}
</style>
